<template>
  <div class="Password">
    <hrad></hrad>
    <div class="subject">
      <h3>密码登录<br /></h3>
      <br />
      <div class="menu">
        <div class="menu_top">
          <input
            type="tel"
            class="tel_1"
            maxlength="11"
            placeholder="请输入手机号码"
            v-model="phonenum"
            @input="v"
          />
        </div>
        <div class="menu_bottom">
          <input
            type="password"
            class="password_1"
            placeholder="输入密码"
            v-model="Password"
            @input="v"
          />
          <div class="menu_bottom_2">
            <img
              src=""
              class="menu_bottom_2_1"
              style="width: 18px; height: 18px"
              alt=""
            />
            <img
              src="../../assets/other.png"
              id="hide"
              style="width: 20px; height: 20px"
              alt=""
            />
          </div>
        </div>
        <p class="feil">请输入正确的账号和密码</p>
        <div class="skip">
          <!-- 跳转验证码登录 -->
          <span href="" @click="mobilePhone" class="skip1"
            ><van-icon name="exchange"  />验证码登录</span
          >
          <span class="skip1" @click="farget">忘记密码?</span>
        </div>
        <button @click="len" ref="aaa">登录</button>
        <div class="box">
          <div>
            <label class="deal" for="check4">
              <input
                type="checkbox"
                name="userName"
                id="check4"
                value=""
                v-model="b"
              /><span><span></span></span>
            </label>
          </div>
          <div class="dea">
            我已读并同意
            <a href="">《用户协议》</a>
            <a href="">《隐私政策》</a>
            <a href="">《儿童/青少年个人信息保护规则》</a>
          </div>
        </div>

        <ul>
          <li>
            <a href=""><img src="" style="width: 30; height: 30px" alt="" /></a>
          </li>
          <li>
            <a href=""><img src="" style="width: 30; height: 30px" alt="" /></a>
          </li>
        </ul>
        <p class="feil"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import hrad from "../../components/Password_hrad.vue";
import { Passwor } from "@/api/home";
export default {
  components: {
    hrad,
  },
  data() {
    return {
      phonenum: "",
      Password: "",
      b: false,
      butt: "class",
      res: [],
      uid: "",
      phone23: "",
    };
  },
  methods: {
    mobilePhone() {
      //     // 跳转到验证码登录
      console.log(1234);
      this.$router.push("/");
    },
    farget() {
      // 跳转到忘记密码
      console.log(2);
      this.$router.push({ path: "/ForgetPassword" });
    },

    len() {
      // console.log(this.b);
      console.log(65);
      if (this.phone !== "" && this.Password !== "" && this.b == true) {
        // a() {
        Passwor({
          phonenum: this.phonenum,
          password: this.Password,
        })
          .then((res) => {
            this.res = res.data;
            this.uid = this.res.uid;
            this.phone23 = this.res.phonenum;
            console.log(res);
            // console.log(this.uid);
            // console.log(this.phone23);
            if (res.success == true) {
              // console.log(localStorage.setItem("userid", JSON.stringify(this.uid)));
              localStorage.setItem("userid", this.uid);
              localStorage.setItem("userphone", this.phone23);
              this.$router.push("/Index");
            } else {
              Toast("请输入正确的账号或密码");
            }
          })
          .catch((rest) => {
            console.log(rest);
            console.log(12223);
            Toast("网络卡顿 请检查网络");
          });
        // },
      } else if (this.phonenum !== "" && this.Password !== "" && this.b == false) {
        console.log(this.b);
        Toast("请勾选我已阅读");
      } else if (this.b == true && this.phonenum == "" || this.Password == "") {
        Toast("账号或密码不能为空");
      }
    },
    v() {
      if (this.phonenum !== "" && this.Password !== "") {
        this.$refs.aaa.style.background = "red";
      } else if (this.phonenum == "" || this.Password == "") {
        this.$refs.aaa.style.background = "rgb(223, 223, 223)";
      }
    },
  },
};
</script>

<style scoped>
#but1 {
  background: red !important;
  color: white !important;
}
.but1 {
  color: #000;
}

.Password {
  box-sizing: border-box;
  background: rgb(255, 255, 255);
}

.subject h3 {
  text-align: center;
  color: rgb(0, 0, 0);
  font-weight: 500;
  letter-spacing: 1px;
}

.subject h3::after {
  content: "未注册的手机号登录成功后将自动注册";
  font-size: 10px;
  display: inline-block;
  color: #000;
  font-weight: 100;
}

.subject {
  /* height: 100vh; */
  margin-top: 0px;
}


.menu {
  height: 200px;
  /* 表单的大小 */
  /* background-color: azure; */
  padding: 0 40px 0;
}

/* 请输入手机号密码的盒子样式 */
.menu_top {
  height: 26px;
  border: 1px solid rgba(69, 68, 73, 0.1);
  /* background: red; */
  line-height: 30px;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
}

/* +86选择 */
.menu_top span {
  width: 40px;
  display: inline-block;
  text-align: center;
  color: rgba(69, 68, 73, 0.9);
}

/* 请输入手机号的样式 */
.tel_1 {
  border: 0;
  background-color: transparent;
  outline: none;
  width: 190px;
}

/* 请输入密码的盒子样式 */
.menu_bottom {
  height: 30px;
  border: 1px solid rgba(69, 68, 73, 0.1);
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  margin-top: 25px;
  position: relative;
}

.password_1 {
  border: 0;
  background-color: transparent;
  width: 220px;
  outline: none;
  line-height: 26px;
  /* 密码框的颜色 */
  /* background-color: saddlebrown; */
  position: absolute;
  top: 0px;
}

.menu_bottom_2 {
  display: inline-block;
  position: absolute;
  right: 0;
  height: 30px;
}

.menu_bottom_2 img {
  padding-top: 5px;
  cursor: pointer;
}

.menu_bottom_2_1 {
  position: absolute;
  right: 25px;
  display: inline-block;
  /* 清除 */
  display: none;
}

.skip {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.skip1 {
  font-size: 10px;
  color: rgb(18, 150, 219);
}

button {
  width: 100%;
  height: 40px;
  background: rgb(223, 223, 223);
  color: rgb(255, 255, 255);
  letter-spacing: 2px;
  margin-top: 15px;
  border: 0;
  border-radius: 25px;
}

.box input[type="checkbox"] {
  display: none;
}

.box input[type="checkbox"] + span {
  box-sizing: border-box;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0px 5px;
  border: 2px solid #ccc;
  vertical-align: sub;
  margin-right: 5px;
  border-radius: 50%;
}

.box input[type="checkbox"] + span > span {
  display: inline-block;
  width: 4px;
  height: 11px;
  float: left;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
  opacity: 0;
}

.box input[type="checkbox"]:checked + span {
  border-color: red;
  background: red;
}

.box input[type="checkbox"]:checked + span > span {
  opacity: 1;
}

.box {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}

.dea {
  /* width: 280px; */
  font-size: 8px;
  display: inline-block;
  letter-spacing: 1px;
}

ul {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
}

::-ms-reveal {
  display: none;
}
.feil {
  display: none;
  /* display: block; */
  text-align: center;
  color: red;
  margin: 15px;
}
</style>